<template>
  <div id="shouye">
    <div class="shouye_top">
      <!--     业主管理      -->
      <div class="yezhu">
        <i class="el-icon-user-solid ifont"></i>
        <span>
          <p @click="yezhu()">业主数量</p>
          <h3 v-text="yzsl"></h3>
        </span>
      </div>
      <!--     员工管理        -->
      <div class="guanli">
        <i class="el-icon-s-custom ifont"></i>
        <span>
          <p @click="yuangong()">员工数量</p>
          <h3 v-text="ygsl"></h3>
        </span>
      </div>
      <!--     账单管理     -->
      <div class="zhangdan">
        <i class="el-icon-s-finance ifont"></i>
        <span>
          <p @click="dianfei()">电费账单</p>
          <p @click="shuifei()">水费账单</p>
        </span>
        <span>
          <p @click="wuye()">物业费账单</p>
          <p @click="tingche()">停车费账单</p>
        </span>
      </div>
      <!--     房屋管理     -->
      <div class="fangwu">
        <i class="el-icon-discount ifont"></i>
        <span>
          <p @click="fangwu()">房屋管理</p>
          <p @click="lookmap()">查看地图</p>
        </span>
      </div>
      <!--     维修管理     -->
      <div class="weixiu ">
        <i class="el-icon-s-tools ifont"></i>
        <span>
          <p @click="yiweixiu()">维修管理</p>
          <p @click="yiweixiu()">已维修数量:<span v-text="ywx"></span></p>
          <p @click="weiweixiu()">未维修数量:<span v-text="wwx"></span></p>
        </span>
      </div>
    </div>
    <!-- echarts图表 -->
    <div class="shouye_echarts">
      <WaTer/>
      <SunHao/>
    </div>
    
  </div>
</template>

<script>
import WaTer from "../../components/rrk/WaTer.vue"
import SunHao from "./SunHao.vue";
import { yzxx } from "@/apis/wyn/link";
import {worker,weixiu} from "@/apis/pm/link"
export default {
  components: {
    WaTer,
    SunHao
  },
  data(){
    return{
      yzsl:'',
      ygsl:'',
      ywx:0,
      wwx:0
    }
  },
  methods:{
    lookmap(){
      this.$router.push("/home/baidumap")
    },
    yezhu(){
      this.$router.push("/home/chakan")
    },
    yuangong(){
      this.$router.push("/home/worker")
    },
    dianfei(){
      this.$router.push("/home/electric")
    },
    shuifei(){
      this.$router.push("/home/WaterChargeManagement")
    },
    wuye(){
      this.$router.push("/home/PersonFeeManagement")
    },
    tingche(){
      this.$router.push("/home/parking")
    },
    fangwu(){
      this.$router.push("/home/fangwu")
    },
    yiweixiu(){
      this.$router.push("/home/weixiu")
    },
    weiweixiu(){
      this.$router.push("/home/nowei")
    }

  },
  mounted(){
    // 请求业主数量
    yzxx().then((res)=>{this.yzsl=res.data.data.length;})
    worker().then((res)=>{this.ygsl=res.data.data.length;})
    weixiu().then((res)=>{
      console.log(res);
      res.data.data.forEach((item) => {
            if(item.repairStatus==0){
              this.ywx+=1
            }else{
              this.wwx+=1
            }
        }); 
    })
  }
};
</script>

<style scoped lang="scss">
#shouye {
  width: 100%;
  height: 100%;
  position: relative;
  .shouye_echarts{
    display: flex;
    margin-top: 50px;
  }
  .shouye_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    div {
      width: 30%;
      height: 130px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      margin-left: 30px;
      span {
        margin-right: 50px;
        margin-top: 20px;
        h3 {
          margin-top: 20px;
          font-size: 30px;
        }
        p:hover {
          color: #409eff;
          cursor: pointer;
        }
      }
    }
    .ifont {
      font-size: 100px;
      line-height: 130px;
      margin-left: 20px;
    }
    .yezhu {
      .el-icon-user-solid {
        color: #409eff;
      }
    }
    .guanli {
      .el-icon-s-custom {
        color: #67c23a;
      }
    }
    .zhangdan {
      .el-icon-s-finance {
        color: #e6a23c;
      }
      span {
        p {
          margin-bottom: 40px;
        }
      }
    }
    .fangwu {
      .el-icon-discount {
        color: #f56c6c;
      }
      span {
        p {
          margin-bottom: 40px;
        }
      }
    }
    .weixiu {
      p{
        margin-bottom: 10px;
      }
    }
  }
}
</style>